<template>
    <el-main>
      <h2>房态图</h2>
      <el-form :inline="true" :model="roomForm" class="demo-form-inline">
        <el-button type="success" @click="get1" plain>分布式</el-button>
        <el-button type="success" @click="get2" plain>集中式</el-button>
        <el-form-item>
          <el-input v-model="roomForm.preName" placeholder="楼盘名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getFangtai">查询</el-button>
        </el-form-item>
      </el-form>

      <el-tabs v-model="activeName">
        <el-tab-pane label="分布式" name="first">
            <div v-for="item in fbForm">
              <p>
          {{item.preName}}
          <span v-if="item.leaseType==1">整租</span><span v-if="item.leaseType==0">合租</span>
          {{item.buildingNo}}栋{{item.unitNo}} 楼{{item.roomNo}}单元
          <span v-if="item.publishStatus==1">已发布</span><span v-if="item.publishStatus==0">未发布</span>
             <el-button @click="handleClick(item)" type="text" size="small">修改</el-button>
            <el-button @click="handleClick2(item)" type="text" size="small">发布</el-button>
            <el-button @click="handleClick3(item)" type="text" size="small">删除</el-button>
              </p>
              <br/>
          <div style="width: 200px;height: 200px">
            <h5>{{item.roomCode}}</h5>
            空置天数{{item.vacancyDate}}天  {{item.rental}}元/月
          </div>
           </div>
        </el-tab-pane>
        <el-tab-pane label="集中式" name="second">
        </el-tab-pane>
      </el-tabs>
    </el-main>
</template>

<script>
import {getFangTai} from "@/api/business/room";

export default {
  name: "fangtai",
  data(){
    return{
      activeName: 'first',
      roomForm:{
        // 默认查询分布式
        hostType:0
      },
      fbForm:{},
      jzForm:{}
    }
  },
  methods:{
    handleClick(row) {
      console.log(row);
    },
    handleClick2(row) {
      console.log(row);
    },
    handleClick3(row) {
      console.log(row);
    },
    //按钮查询
    get1(){
      this.roomForm.hostType=0;
      this.getFangtai()
    },
    get2(){
      this.roomForm.hostType=1;
      this.getFangtai()
    },
    //条件查询
    getFangtai(){
      getFangTai(this.roomForm).then(rep=>{
        this.fbForm=rep.rows;
      })
    }
  },
  created() {
    this.getFangtai()
  }
}
</script>

<style scoped>

</style>
